<template>
	<div>
		<div class="my-form-container" style="height:840px">
			<el-form ref="dataForm" :model="dataForm" :rules="rules" class="demo-ruleForm">
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
						<el-form-item  prop="studentName">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.studentName" :disabled="dataForm.studentName != '' ? 'true' : 'false'"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</div>
						<el-form-item  prop="gender">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.gender"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</div>
						<el-form-item  prop="studentCode">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.studentCode" :disabled="dataForm.studentCode != '' ? 'true' : 'false'"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">身份证号</div>
						<el-form-item  prop="idCard">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.idCard" maxlength="18" :disabled="dataForm.idCard != '' ? 'true' : 'false'"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">出生时间</div>
						<el-form-item  prop="birthday">
							<div class="my-form-item-value">
								<el-date-picker class="time" v-model="dataForm.birthday" type="date" value-format="yyyy-MM-dd" :disabled="dataForm.birthday != '' ? 'true' : 'false'"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">出生地</div>
						<el-form-item  prop="birthdayPlace">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.birthdayPlace"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</div>
						<el-form-item  prop="nativePlace">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.nativePlace"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</div>
						<el-form-item  prop="nation">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.nation" :disabled="dataForm.nation != '' ? 'true' : 'false'"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">学员来源</div>
						<el-form-item  prop="sourceArea">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.sourceArea" placeholder="请选择" class="inputWidth" :disabled="dataForm.sourceArea != '' ? 'true' : 'false'">
									<el-option label="青年学生" value="青年学生"></el-option>
									<el-option label="部队考生" value="部队考生"></el-option>
									<el-option label="其他" value="其他"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学员类别</div>
						<el-form-item  prop="studentType">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.studentType" placeholder="请选择" class="inputWidth">
									<el-option v-for="item in xyType" :key="item.dictValue" :label="item.dictValue" :value="item.dictKey"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<!-- <el-col :span="12">
						<div class="my-form-item-label">专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</div>
						<el-form-item  prop="yearSpecialtyName">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.yearSpecialtyName"></el-input>
							</div>
						</el-form-item>
					</el-col> -->
					<el-col :span="24">
						<div class="my-form-item-label">专业班次</div>
						<el-form-item  prop="specialtyClassName">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.specialtyClassName" :disabled="dataForm.specialtyClassName != '' ? 'true' : 'false'"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">政治面貌</div>
						<el-form-item  prop="politicsFace">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.politicsFace"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">党团时间</div>
						<el-form-item  prop="dtsj">
							<div class="my-form-item-value">
								<el-date-picker class="time" v-model="dataForm.dtsj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">生源省份</div>
						<el-form-item  prop="province">
							<div class="my-form-item-value">
								<el-select v-if="dataForm.studentProvinces == ''" v-model="province" placeholder="请选择" class="width139 right10" @change="nextLas" style="width:180px">
									<el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.label"></el-option>
								</el-select>
								<el-select v-if="dataForm.studentProvinces == ''" v-model="county" placeholder="请选择" class="width139 right10" style="width:180px;margin-left:10px">
									<el-option v-for="cc in testList" :key="cc.value" :label="cc.label" :value="cc.label"></el-option>
								</el-select>
								<el-input v-if="dataForm.studentProvinces != ''" class="inputWidth" v-model="dataForm.studentProvinces" disabled></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">血&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</div>
						<el-form-item  prop="xx">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.xx"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">家庭住址</div>
						<el-form-item  prop="jtzz">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.jtzz"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">家庭电话</div>
						<el-form-item  prop="jtdh">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.jtdh"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">婚姻状况</div>
						<el-form-item  prop="hyzk">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.hyzk"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</div>
						<el-form-item  prop="edu">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.edu"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">军人类型</div>
						<el-form-item  prop="soldierType">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.soldierType"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">军人证件号</div>
						<el-form-item  prop="cretCode">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.cretCode"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">原部职别</div>
						<el-form-item  prop="ybzb">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.ybzb"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">职务层级</div>
						<el-form-item  prop="zwcj">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.zwcj"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">入伍地</div>
						<el-form-item  prop="rwd">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.rwd"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">入伍时间</div>
						<el-form-item  prop="rwsj">
							<div class="my-form-item-value">
								<el-date-picker class="time" v-model="dataForm.rwsj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item" style="border:none">
					<el-col :span="12">
						<div class="my-form-item-label">技术职务</div>
						<el-form-item  prop="jszw">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.jszw"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">技术等级</div>
						<el-form-item  prop="jsdj">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.jsdj"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<p class="notice">注：每页填写后要单独保存，否则数据会丢失</p>
		<div class="button-group">
			<div class=""  @click="save" >保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
		<el-dialog title="提示" :visible.sync="noticeDialog" width="983px" :closeOnClickModal="false">
			<div class="message-container">
				<p class="dialogNotice">您当前页面还有未保存信息,请先保存!</p>
				<span slot="footer" class="dialog-footer">
					<button @click="continueJump">继续跳转</button>
					<button @click="noticeDialog = false">返回保存</button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import {addStudentBasic} from "@/api/student";
import {city }from "@/util/city"
  export default {
		data(){
		  return {
			  city:city,
			  testList:[],//区
			  province:'',
			  county:'',
			// dataForm:{
			// 	studentName:'',//姓名
			// 	gender:'',//性别
			// 	studentCode:'',//学号
			// 	idCard:'',//身份证号
			// 	birthday:'',//出生时间
			// 	birthdayPlace:'',//出生地
			// 	nativePlace:'',//籍贯
			// 	nation:'',//民族
			// 	sourceArea:'',// 学员来源
			// 	studentType:'',//学员类别
			// 	yearSpecialtyName:'',//专业
			// 	specialtyClassName:'',// 专业班次
			// 	politicsFace:'',// 政治面貌
			// 	studentProvinces:'',//生源省份
			// 	jtzz:'',//家庭住址
			// 	xx:'',//血型
			// 	jtdh:'',//家庭电话
			// 	edu:'',//学历
			// 	soldierType:'',//军人类型
			// 	cretCode:'',//军人证件号
			// 	ybzb:'',//原部职别
			// 	zwcj:'',//职务层级
			// 	rwd:'',//入伍地
			// 	rwsj:'',//入伍时间
			// 	jszw:'',//技术职务
			// 	jsdj:'',//技术等级

			// },
			rules: {
                studentName: [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请填写性别', trigger: 'blur' }
                ],
                studentCode: [
                    { required: true, message: '请填写学号', trigger: 'blur' }
                ],
                idCard: [
					{ required: true, message: '请填身份证号', trigger: 'blur' },
					{validator: (rule, value, callback) => {
					if (value && !/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
						callback(new Error('请输入正确的身份证号'));
					} else {
						return callback();
					}}, trigger: 'blur'}
                ],
                jtdh: [{
					validator: (rule, value, callback) => {
					if (value && !/^1[3456789]\d{9}$/.test(value)) {
						callback(new Error('请输入正确的家庭电话'));
					} else {
						return callback();
					}}, trigger: 'blur'}
				]
            },
			noticeDialog:false,
			xyType:[],
          }
		},
		props: {
			dataForm: {
				type: Object,
				default:()=>{}
			},
			// console.log(dataForm)
		},
		mounted(){
			this.commonApi.getCommonData({code:'studentCode'}).then(res=>{
                this.xyType = res.data
            })
		},
        methods: {
			nextLas(e){
				this.dataForm.county = '';
				this.testList = [];
				if(e != ''){
					this.testList = city.filter(item=>item.label == e)[0].children;
				}
			},
            cancel(){
				this.noticeDialog = true;
			},
			save(){
				this.$refs['dataForm'].validate(async(valid) => {
                    if (valid) {
						let params = this.dataForm
						delete params.xyAdmissionGraduationInfo
						delete params.xyChangeInfo
						delete params.xyFamilyInfo;
						// if(this.province !='' && this.county == ''){
						// 	this.$message({
						// 		type:'info',
						// 		message:'生源省份不完整！'
						// 	})
						// 	return
						// }
                        let res = await addStudentBasic(params)
                        if(res.code == 200){
                            this.$message({message: '添加成功',type: 'success'});
							this.$emit('saveFirst')
                        } else {
                            this.$message.error(res.msg);
                        }
                    } 
                });
			},
			continueJump(){
				this.noticeDialog = false;
				this.$emit('continueJump')
			}
        }
  };
</script>
<style scoped lang="less">
 	/deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
	.dialogNotice{
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 20px;
		color: #004CA7;
		text-align: center;
		margin: 68px 0 92px 0;
	}
	.dialog-footer{
		display: flex;
		justify-content: center;
		margin-bottom: 100px;
		button{
			width: 114px;
			height: 36px;
			border-radius: 6px;
			&:nth-child(1) {
				background: #FFF6EF;
				border: 1px solid #F3B815;	
				color: #F3B815;
				margin-right: 96px;			
			}
			&:nth-child(2) {
				background: #F1FFF8;
				border: 1px solid #02C86C;
				color: #02C86C;
			}
		}
	}
	.notice{
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 0px;
		color: #FF3819;
	}
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 184px;}
    // 编辑select的样式
    .reSelectClass{
        width: 184px;
    }
	.time{
		width: 184px;
	}
	.button-group {
		margin-top: 68px;
		padding-bottom: 132px;
		text-align: center;
		> div {
			display: inline-block;
			font-size: 16px;
			padding: 6px 22px;
			border-radius: 6px;
			cursor: pointer;
			&:nth-child(1) {
				color: #F3B815;
				border: 1px solid #F3B815;
				background: #FFF6EF;
				margin-right: 187px;
			}
			&:nth-child(2) {
				color:#FF3819;
				background: #FFEFEF;
				border: 1px solid #FF3819;
			}
		}
	}
</style>